<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    #container {
        width: 100px; border: solid;
    }
    .child {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 50px;
    }
    #child1 {
        background: green;
        overflow: hidden;
    }
    #child2 {
        overflow: auto;
    }
    .target {
        position: absolute;
        width: 10px;
        height: 10px;
        background: red;
        top: 0;
    }
    canvas {
        width: 80%;
        background: green;
    }
</style>

<div id="container">
  <div id="child1" class="child">
      <div id="target2" class="target"></div>
  </div>
  <div id="child2" class="child">
      <canvas width=10 height=10></canvas> <!-- Baseline of the canvas will move when a scrollbar is added. -->
      <div id="target1" class="target"></div>
  </div>
</div>
<script>
    test(() => {
        document.body.offsetTop;
        document.getElementById('target1').style.top = '100px';
        document.getElementById('target2').style.top = '100px';
    }, "This test should not crash in debug.");
</script>
